<!--
 * @Description: ACCAPage 
 * @Author: your name
 * @Date: 2024-03-26
 * @LastEditTime: 2024-03-26
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(banneritem, index) in BannerArry"
            :key="'banner' + index"
          >
            <a :href="banneritem.url" target="_blank">
              <img :src="banneritem.img" alt="" />
            </a>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="notice">
      <div class="wrapper">
        <div class="notice_box">
          <p class="left_tit">最新公告</p>
          <a
            href="https://www.rongyuejiaoyu.com/acca/article/34666.html"
            class="item no_r"
            title="2024年ACCA考试报名时间安排已公布"
            target="_blank"
          >
            <h5>2024年ACCA考试报名时间安排已公布</h5>
            <p>
              每年举行四次考试，分别在3月/6月/9月/12月。每个考季分为2个不同的报名阶段，即常规报名阶段和后期报名阶段。学员一般可在考前3个月左右开始报名。
            </p>
          </a>
          <a
            href="https://www.rongyuejiaoyu.com/acca/article/34956.html"
            class="item no_r"
            title="2024年3月ACCA报考时间、考试科目安排"
            target="_blank"
          >
            <h5>2024年6月ACCA报考时间、考试科目安排</h5>
            <p>
              2024年6月ACCA考试常规报名于2月6日开始，常规报名于4月29日截止，后期报名截止时间为5月6日。考试时间是在2024年6月3日-6月7日进行。
            </p>
          </a>
          <a
            href="http://www.rongyuejiaoyu.com/acca/article/33948.html"
            class="item"
            title="2023年9月-2024年8月ACCA考纲变化"
            target="_blank"
          >
            <h5>2023年9月-2024年8月ACCA考纲变化</h5>
            <p>
              ACCA考纲变动基本在每年6月季考开始，新考纲会维持一年左右。以下是2023年9月-2024年8月ACCA考纲变动情况
            </p>
          </a>
        </div>
      </div>
    </div>
    <div class="about">
      <div class="wrapper">
        <div class="video_box">
          <div
            class="video_bg wow animate__animated animate__fadeInUp"
            data-wow-delay="0s"
          >
            <video
              id="video"
              controls
              src="https://video.rycfa.com/sv/53e8de3f-182581162cc/53e8de3f-182581162cc.mp4"
              @play="OnPlay"
              @pause="OnPause"
            ></video>
            <img
              class="play_img"
              src="@/assets/images/acca/play.png"
              alt=""
              v-if="!playing"
              @click="Play_video"
            />
            <img
              class="out_img"
              src="@/assets/images/acca/zcjd.jpg"
              alt=""
              v-if="!playing"
            />
          </div>
          <div class="right">
            <div
              class="common wow animate__animated animate__fadeInUp"
              data-wow-delay="0.3s"
            >
              <div
                class="part1"
                title="点击查看详情"
                @mouseenter="OnOthershow(0)"
                v-show="otherShow == 0"
              >
                <h5 class="little_tit">解读 :</h5>
                <p>
                  ACCA特许公认会计师公会(The Association of Chartered Certified
                  Account-ants，简称ACCA)成立于1904年，
                </p>
              </div>
              <div
                class="part2"
                v-show="aboutindex == 0 && otherShow == 1"
                @mouseleave="OnOthershow(2)"
              >
                <h5 class="little_tit">解读 :</h5>
                <p>
                  ACCA特许公认会计师公会(The Association of Chartered Certified
                  Account
                  -ants，简称ACCA)成立于1904年，是世界上领先的专业会计师团体。英国立法许
                  可ACCA会员从事审计、投资顾问和破产执行的工作，但在中国只有中国注册会计
                  师（CICPA）获得法律认可。
                </p>
                <p>
                  ACCA在国内被称为国际注册会计师，是全球权威的财会金融领域的证书之一，更是国际认可范围高的财务人员资格证书。
                </p>
              </div>
            </div>
            <div
              class="common wow animate__animated animate__fadeInUp"
              data-wow-delay="0.3s"
              @mouseenter="OnOthershow(1)"
            >
              <div class="part1" title="点击查看详情" v-show="otherShow == 1">
                <h5 class="little_tit">政策 :</h5>
                <p>
                  为吸引和培养国际化高端财会人才，不少地方政府纷纷把ACCA纳入紧缺人不少地方政府纷纷把ACCA纳入紧缺人
                </p>
              </div>
              <div
                class="part2"
                v-show="aboutindex == 1 && otherShow == 1"
                @mouseleave="OnOthershow(2)"
              >
                <h5 class="little_tit">政策 :</h5>
                <p>
                  为吸引和培养国际化高端财会人才，不少地方政府纷纷把ACCA纳入紧缺人才目录、高端金融人才发展规划，给予不同程度的财政支持和福利待遇。
                </p>
                <p>
                  同时除了各地将ACCA人才作为重点发展对象之外，还有不少地方注册会计师协会还纷纷将ACCA纳入行业发展专项基金的奖励范畴，为ACCA人才提供数额客观的现金奖励。
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="advantage">
          <ul>
            <li
              @mouseenter="advantagehover(0)"
              @mouseleave="advantageLivehover()"
            >
              <div
                class="section1 wow animate__animated animate__fadeInRight"
                data-wow-delay="0.9s"
              >
                <h5>具有全球影响力</h5>
                <p>
                  ACCA将带您进入全球范围内近50万学员的人才圈，给您一个充满机会的世界。
                </p>
                <p class="round">89%</p>
              </div>
              <div
                class="section2 animate__animated animate__fadeInUp"
                v-if="sindex == 0"
                data-wow-delay="0.9s"
              >
                <h5>具有全球影响力</h5>
                <p>
                  ACCA将带您进入全球范围内近50万学员的人才圈，给您一个充满机会的世界。
                </p>
                <p class="round">89%</p>
                <p class="btm_text">89%的福布斯500强企业偏向雇佣ACCA人才</p>
              </div>
            </li>
            <li
              @mouseenter="advantagehover(1)"
              @mouseleave="advantageLivehover()"
            >
              <div
                class="section1 wow animate__animated animate__fadeInRight"
                data-wow-delay="1.2s"
              >
                <h5>无限职业可能</h5>
                <p>全世界各地的企业雇主将ACCA资格证书视为专业卓越的标准</p>
                <p class="round">83%</p>
              </div>
              <div
                class="section2 animate__animated animate__fadeInUp"
                v-if="sindex == 1"
                data-wow-delay="0.9s"
              >
                <h5>无限职业可能</h5>
                <p>全世界各地的企业雇主将ACCA资格证书视为专业卓越的标准</p>
                <p class="round">83%</p>
                <p class="btm_text">83%的财务500强企业雇佣ACCA学员和会员</p>
              </div>
            </li>
            <li
              @mouseenter="advantagehover(2)"
              @mouseleave="advantageLivehover()"
            >
              <div
                class="section1 wow animate__animated animate__fadeInRight"
                data-wow-delay="1.5s"
              >
                <h5>行业菁英</h5>
                <p>
                  ACCA立足于国际专业会计师前列，是全球权威的商界通行证，财会界的MBA。
                </p>
                <p class="round">7291</p>
              </div>
              <div
                class="section2 animate__animated animate__fadeInUp"
                v-if="sindex == 2"
                data-wow-delay="0.9s"
              >
                <h5>行业菁英</h5>
                <p>
                  ACCA立足于国际专业会计师前列，是全球权威的商界通行证，财会界的MBA。
                </p>
                <p class="round">7219</p>
                <p class="btm_text" style="font-size: 14px">
                  全球7291家知名企业已加入“ACCA认可雇主计划”
                </p>
              </div>
            </li>
            <li
              @mouseenter="advantagehover(3)"
              @mouseleave="advantageLivehover()"
            >
              <div
                class="section1 wow animate__animated animate__fadeInRight"
                data-wow-delay="1.8s"
              >
                <h5>创新学习与支持</h5>
                <p>融跃提供创新灵活多变的学习方式，让你的学习变得高效轻松。</p>
                <p class="round">54%</p>
              </div>
              <div
                class="section2 animate__animated animate__fadeInUp"
                v-if="sindex == 3"
                data-wow-delay="0.9s"
              >
                <h5>创新学习与支持</h5>
                <p>融跃提供创新灵活多变的学习方式，让你的学习变得高效轻松。</p>
                <p class="round">54%</p>
                <p class="btm_text">54%的融跃ACCA学员已获得相关奖学金</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="ready_test">
      <h5 class="wow animate__animated animate__fadeInUp">
        ACCA不同人群如何备考
      </h5>
      <div class="wrapper">
        <div
          class="box wow animate__animated animate__fadeInLeft"
          data-wow-delay="0.5s"
          @mouseenter="Tohover(0)"
          @mouseleave="Livehover()"
        >
          <img class="top_img" src="@/assets/images/acca/dollor.png" alt="" />
          <img class="icon_img" src="@/assets/images/acca/yh.png" alt="" />
          <p>财务、金融相关专业</p>
          <p class="sec_p">基础较好的考生</p>
          <a
            :class="{ contact_kefu: true, tored: isbred && aindex == 0 }"
            rel="nofollow"
            >获取备考计划</a
          >
        </div>
        <div
          class="box wow animate__animated animate__fadeInLeft"
          data-wow-delay="0.8s"
          @mouseenter="Tohover(1)"
          @mouseleave="Livehover()"
        >
          <img class="top_img" src="@/assets/images/acca/time.png" alt="" />
          <img class="icon_img" src="@/assets/images/acca/yh.png" alt="" />
          <p style="font-size: 16px">非财务、金融相关专业</p>
          <p class="sec_p">基础一般，时间比较充足的考生</p>
          <a
            :class="{ contact_kefu: true, tored: isbred && aindex == 1 }"
            rel="nofollow"
            >获取备考计划</a
          >
        </div>
        <div
          class="box wow animate__animated animate__fadeInLeft"
          data-wow-delay="1.1s"
          @mouseenter="Tohover(2)"
          @mouseleaver="Livehover()"
        >
          <img class="top_img" src="@/assets/images/acca/work.png" alt="" />
          <img class="icon_img" src="@/assets/images/acca/yh.png" alt="" />
          <p>参加工作</p>
          <p class="sec_p">学习时间比较紧张的考生</p>
          <a
            :class="{ contact_kefu: true, tored: isbred && aindex == 2 }"
            rel="nofollow"
            >获取备考计划</a
          >
        </div>
      </div>
    </div>
    <!-- 课程 -->
    <div class="course_box">
      <div class="wrapper">
        <div class="tit_box">
          <h5
            class="wow animate__animated animate__bounceInUp"
            data-wow-delay="0s"
          >
            融跃多种课程设置
          </h5>
          <p
            class="line wow animate__animated animate__bounceInUp"
            data-wow-delay="0.2s"
          ></p>
          <p
            class="little_tit wow animate__animated animate__bounceInUp"
            data-wow-delay="0.4s"
          >
            ACCA培训课程 满足不同考生备考需求
          </p>
        </div>
        <div class="course_list">
          <a
            :href="'/homes_comms/handpick_kc/' + CourseItem.id"
            :class="{
              item: true,
              wow: true,
              animate__animated: true,
              animate__fadeInRight: true,
              act: courseIndex == index
            }"
            :data-wow-delay="'0.' + index + 's'"
            target="_blank"
            v-for="(CourseItem, index) in CourseList"
            :key="'Course' + index"
            @mouseenter="OnCourseenter(index)"
            @mouseleave="OnCourseleave()"
          >
            <div class="img_box">
              <img :src="CourseItem.img" alt="" />
            </div>
            <div class="btm">
              <h5>{{ CourseItem.name }}</h5>
              <p class="info">{{ CourseItem.adapt }}</p>
              <div class="study_num">
                <img src="@/assets/images/acca/p.png" alt="" />
                <img
                  class="people_w"
                  src="@/assets/images/acca/p_w.png"
                  alt=""
                />
                <p>{{ CourseItem.study_num }}人在学</p>
              </div>
              <p class="arr_r">
                <img src="@/assets/images/acca/arr_r.png" alt="" />
              </p>
            </div>
          </a>
        </div>
        <a
          class="more_course wow animate__animated animate__fadeInRight"
          data-wow-delay="1s"
          href="/combo/order/combo/cid/3"
          target="_blank"
          >更多ACCA课程</a
        >
      </div>
    </div>
    <div class="get_test">
      <h5 class="wow animate__animated animate__bounceInUp" data-wow-delay="0s">
        免费申领ACCA试学
      </h5>
      <div class="wrapper">
        <div class="ipts">
          <input
            class="wow animate__animated animate__fadeInRight"
            data-wow-delay="0.2s"
            type="text"
            name="name"
            placeholder="请输入您的姓名"
            v-model="user_name"
          />
          <input
            class="wow animate__animated animate__fadeInRight"
            data-wow-delay="0.4s"
            type="text"
            name="phone"
            placeholder="请输入手机号"
            v-model="phone_num"
          />
          <input
            class="wow animate__animated animate__fadeInRight"
            data-wow-delay="0.6s"
            type="text"
            name="code"
            placeholder="请输入验证码"
            v-model="phone_code"
          />
          <a
            class="wow animate__animated animate__fadeInRight"
            data-wow-delay="0.8s"
            id="code_btn"
            rel="nofollow"
            href="javascript:void(0);"
            v-if="!is_code"
            >获取验证码</a
          >
          <a
            class="wow animate__animated animate__fadeInRight"
            data-wow-delay="0.8s"
            id="code_btn"
            rel="nofollow"
            href="javascript:void(0);"
            v-if="is_code"
            >{{ codetext }}</a
          >
          <a
            class="wow animate__animated animate__fadeInRight"
            data-wow-delay="1s"
            id="btn"
            rel="nofollow"
            href="javascript:void(0);"
            >立即领取</a
          >
        </div>
      </div>
    </div>
    <!-- 直播 -->
    <div class="live_box">
      <div class="wrapper">
        <div class="tit_box">
          <h5
            class="wow animate__animated animate__bounceInUp"
            data-wow-delay="0s"
          >
            专属直播课堂
          </h5>
          <p
            class="line wow animate__animated animate__bounceInUp"
            data-wow-delay="0.2s"
          ></p>
          <p
            class="little_tit wow animate__animated animate__bounceInUp"
            data-wow-delay="0.4s"
          >
            名师面对面随时扫除备考疑惑
          </p>
        </div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide wow animate__animated animate__fadeInRight"
              :data-wow-delay="'0.' + index + 's'"
              v-for="(liveitem, index) in LiveList"
              :key="'liveitem' + index"
            >
              <div class="time">
                <h5>{{ liveitem.day }}</h5>
                <p>{{ liveitem.hour }}</p>
              </div>
              <div class="live_info">
                <img :src="liveitem.img" alt="" />
                <p class="live_name">{{ liveitem.title }}</p>
                <div class="yy_num">
                  <p class="isopen"><i></i><span>免费</span></p>
                  <p class="num">{{ liveitem.buy_count }}人已预约</p>
                </div>
                <a
                  :href="'/homes_comms/handpick_kc/' + liveitem.live_id"
                  class="yy_now"
                  target="_blank"
                  >立即预约</a
                >
              </div>
            </div>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
        <a
          class="all_live wow animate__animated animate__fadeInRight"
          data-wow-delay="1s"
          href="http://www.rongyuejiaoyu.com/combo/index/zhibo"
          target="_blank"
          >查看全部直播</a
        >
      </div>
    </div>
    <!-- 特色资料 -->
    <div class="get_data">
      <a
        href="https://www.rongyuejiaoyu.com/combo/index/material"
        rel="nofollow"
        target="_blank"
      >
        <img src="@/assets/images/acca/get_data.png" alt="" />
      </a>
    </div>
    <!-- 资讯 -->
    <div class="news_box">
      <div class="wrapper">
        <div class="tit_box">
          <h5
            class="wow animate__animated animate__bounceInUp"
            data-wow-delay="0s"
          >
            前沿备考资讯
          </h5>
          <p
            class="line wow animate__animated animate__bounceInUp"
            data-wow-delay="0.2s"
          ></p>
          <p
            class="little_tit wow animate__animated animate__bounceInUp"
            data-wow-delay="0.4s"
          >
            一站解决ACCA备考的全部问题
          </p>
        </div>
        <div class="main">
          <div class="left">
            <div class="navs">
              <p
                :class="{
                  wow: true,
                  animate__animated: true,
                  animate__fadeInUp: true,
                  active: newIndex == index
                }"
                :data-wow-delay="'0.' + index + 's'"
                v-for="(cateitem, index) in CateList"
                :key="'cateitem' + index"
                @mouseenter="newhover(index)"
                @mouseleave="newleave()"
              >
                {{ cateitem }}
              </p>
            </div>
            <div class="box">
              <div class="news_info">
                <div class="top wow animate__animated animate__fadeInUp">
                  <img :src="NewList[0].img" alt="" />
                  <a
                    :href="
                      'http://www.rongyuejiaoyu.com/acca/article/' +
                      NewList[0].img.id +
                      '.html'
                    "
                    target="_blank"
                    class="first_news"
                  >
                    <h5 title="{$v.child.0.title}">{{ NewList[0].title }}</h5>
                    <p>
                      {{ NewList[0].description }}
                    </p>
                  </a>
                </div>
                <div class="other_news">
                  <a
                    class="wow animate__animated animate__bounceInUp"
                    :data-wow-delay="'0.' + index + 's'"
                    :title="Newitem.title"
                    :href="
                      'http://www.rongyuejiaoyu.com/acca/article/' +
                      Newitem.id +
                      '.html'
                    "
                    target="_blank"
                    v-for="(Newitem, index) in NewList"
                    :key="'Newitem' + index"
                  >
                    <!-- v-if="index >= 1 && index <= 8" -->
                    {{ Newitem.title }}
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <h5 class="tit wow animate__animated animate__bounceInUp">
              ACCA备考时间轴
            </h5>
            <div class="times">
              <div class="item">
                <p>1月</p>
                <p class="round"><span></span></p>
                <div class="sure_time">
                  <h5>2024年3月考试常规报名截止</h5>
                  <p>2024年1月29日</p>
                </div>
              </div>
              <div class="item">
                <p>2月</p>
                <p class="round"><span></span></p>
                <div class="sure_time">
                  <h5>2024年3月考试后期报名截止</h5>
                  <p>2024年2月5日</p>
                </div>
              </div>
              <div class="item">
                <p>2月</p>
                <p class="round"><span></span></p>
                <div class="sure_time">
                  <h5>2024年6月考季报名开始时间</h5>
                  <p>2024年2月6日</p>
                </div>
              </div>
              <div class="item">
                <p>3月</p>
                <p class="round"><span></span></p>
                <div class="sure_time">
                  <h5>2024年3月考试时间</h5>
                  <p>2024年3月4日-3月8日</p>
                </div>
              </div>
              <div class="item">
                <p>4月</p>
                <p class="round"><span></span></p>
                <div class="sure_time">
                  <h5>2024年6月考试常规报名截止</h5>
                  <p>2024年4月29日</p>
                </div>
              </div>
              <div class="item">
                <p>5月</p>
                <p class="round"><span></span></p>
                <div class="sure_time">
                  <h5>2024年6月考试后期报名截止</h5>
                  <p>2024年5月6日</p>
                </div>
              </div>
              <div class="item">
                <p>6月</p>
                <p class="round"><span></span></p>
                <div class="sure_time">
                  <h5>2024年6月考试时间</h5>
                  <p>2024年6月3日-6月7日</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="common_questions">
          <h5 class="wow animate__animated animate__fadeInUp">Q:常见问题</h5>
          <div class="ques_box">
            <a
              class="wow animate__animated animate__fadeInUp"
              data-wow-delay="0.6s"
              href="/acca/article/34602.html"
              target="_blank"
              >注册流程</a
            >
            <a
              class="wow animate__animated animate__fadeInUp"
              data-wow-delay="0.8s"
              href="/acca/article/34610.html"
              target="_blank"
              >考试科目</a
            >
            <a
              class="wow animate__animated animate__fadeInUp"
              data-wow-delay="1.0s"
              href="/acca/article/33948.html"
              target="_blank"
              >考试大纲</a
            >
            <a
              class="wow animate__animated animate__fadeInUp"
              data-wow-delay="1.2s"
              href="/acca/article/34666.html"
              target="_blank"
              >报考时间</a
            >
            <a
              class="wow animate__animated animate__fadeInUp"
              data-wow-delay="1.4s"
              href="/acca/article/34595.html"
              target="_blank"
              >考试费用</a
            >
            <a
              class="wow animate__animated animate__fadeInUp"
              data-wow-delay="1.6s"
              href="/acca/article/4139.html"
              target="_blank"
              >报考条件</a
            >
            <a
              class="wow animate__animated animate__fadeInUp"
              data-wow-delay="1.8s"
              href="/acca/article/34364.html"
              target="_blank"
              >报考流程</a
            >
            <a
              class="wow animate__animated animate__fadeInUp"
              data-wow-delay="2.0s"
              href="/acca/article/4147.html"
              target="_blank"
              >考点信息</a
            >
            <a
              class="wow animate__animated animate__fadeInUp"
              data-wow-delay="2.2s"
              href="/acca/article/34616.html"
              target="_blank"
              >免考政策</a
            >
            <a
              class="wow animate__animated animate__fadeInUp"
              data-wow-delay="2.4s"
              href="/combo/order/combo/cid/3.html"
              target="_blank"
              >考试辅导</a
            >
            <a
              class="wow animate__animated animate__fadeInUp"
              data-wow-delay="2.6s"
              href="/combo/order/book/cid/3"
              target="_blank"
              >教材指南</a
            >
            <a
              class="wow animate__animated animate__fadeInUp"
              data-wow-delay="2.8s"
              href="/acca/article/34544.html"
              target="_blank"
              >海外学位</a
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 团队 -->
    <div class="teachers">
      <div class="wrapper">
        <div class="tit_box">
          <h5
            class="wow animate__animated animate__bounceInUp"
            data-wow-delay="0s"
          >
            专业师资团队
          </h5>
          <p
            class="line wow animate__animated animate__bounceInUp"
            data-wow-delay="0.2s"
          ></p>
          <p
            class="little_tit wow animate__animated animate__bounceInUp"
            data-wow-delay="0.4s"
          >
            业内大咖讲师全程陪跑 让你赢在起跑线上
          </p>
        </div>
        <div class="tea_info_box">
          <div
            class="tea_info wow animate__animated animate__fadeInUp"
            v-for="(teacheritem, index) in TeacherList"
            :key="'teacheritem' + index"
          >
            <div class="tea_text">
              <div class="inner">
                <p class="name">{{ teacheritem.name }}</p>
                <p class="honor">融跃ACCA讲师</p>
                <div class="tea_adv">
                  <p
                    v-for="(textitem, index) in teacheritem.TextArry"
                    :key="'textitem' + index"
                  >
                    {{ textitem }}
                  </p>
                </div>
                <p class="intd">
                  {{ teacheritem.describe }}
                </p>
                <a class="consult_tea contact_kefu" rel="nofollow">
                  <p>咨询老师</p>
                  <img src="@/assets/images/acca/msg.png" alt="" />
                </a>
              </div>
            </div>
            <div class="tea_img">
              <img :src="teacheritem.img" alt="" />
            </div>
          </div>
        </div>
        <div class="tea_list">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide wow animate__animated animate__fadeInUp"
                :data-wow-delay="'0.' + index + 's'"
                v-for="(steacheritem, index) in TeacherList"
                :key="'steacheritem' + index"
              >
                <img :src="steacheritem.image" alt="" />
              </div>
            </div>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      </div>
    </div>
    <!-- 五大保障 -->
    <div class="safeguard">
      <div class="wrapper">
        <div class="tit_box">
          <h5
            class="wow animate__animated animate__bounceInUp"
            data-wow-delay="0s"
          >
            5大专属保障
          </h5>
          <p
            class="line wow animate__animated animate__bounceInUp"
            data-wow-delay="0.2s"
          ></p>
          <p
            class="little_tit wow animate__animated animate__bounceInUp"
            data-wow-delay="0.4s"
          >
            一键获取 ACCA培训课程 学习资料包
          </p>
        </div>
        <div class="safe_list">
          <div
            class="item wow animate__animated animate__fadeInRight"
            data-wow-delay="0.6s"
          >
            <img src="@/assets/images/acca/jxtx.png" alt="" />
            <div class="text">
              <h5>教学体系完善</h5>
              <p>多年教学经验，与国际化前沿性和实操性相结合。</p>
            </div>
            <a class="contact_kefu" rel="nofollow">→咨询详情</a>
          </div>
          <div
            class="item wow animate__animated animate__fadeInRight"
            data-wow-delay="0.8s"
          >
            <img src="@/assets/images/acca/kclh.png" alt="" />
            <div class="text">
              <h5>课程设置灵活</h5>
              <p>多种课程班型，满足不同学员需求，高效备考。</p>
            </div>
            <a class="contact_kefu" rel="nofollow">→咨询详情</a>
          </div>
          <div
            class="item wow animate__animated animate__fadeInRight"
            data-wow-delay="1s"
          >
            <img src="@/assets/images/acca/mszy.png" alt="" />
            <div class="text">
              <h5>名师专业化</h5>
              <p>知名ACCA讲师全程指导答疑，更贴近考试。</p>
            </div>
            <a class="contact_kefu" rel="nofollow">→咨询详情</a>
          </div>
          <div
            class="item wow animate__animated animate__fadeInRight"
            data-wow-delay="1.2s"
          >
            <img src="@/assets/images/acca/zljz.png" alt="" />
            <div class="text">
              <h5>资料高精准</h5>
              <p>
                拒绝题海，侧重重点、难点知识点，精简真题、讲座、音频等资料。
              </p>
            </div>
            <a class="contact_kefu" rel="nofollow">→咨询详情</a>
          </div>
          <div
            class="item wow animate__animated animate__fadeInRight"
            data-wow-delay="1.4s"
          >
            <img src="@/assets/images/acca/dd.png" alt="" />
            <div class="text">
              <h5>督导一站式</h5>
              <p>全面实现教辅责任制专业硕博辅导，全程陪伴直达通关。</p>
            </div>
            <a class="contact_kefu" rel="nofollow">→咨询详情</a>
          </div>
        </div>
        <div class="btns">
          <a
            class="item wow animate__animated animate__fadeInLeft contact_kefu"
            rel="nofollow"
            data-wow-delay="1.4s"
            >更多问题 →</a
          >
          <a
            class="item wow animate__animated animate__fadeInRight contact_kefu"
            rel="nofollow"
            data-wow-delay="1.4s"
            >在线咨询 →</a
          >
        </div>
      </div>
    </div>
    <!-- 快速成就自我 -->
    <div class="achievement">
      <div class="wrapper">
        <div class="tit_box">
          <h5>想要快速成就自我</h5>
          <img src="@/assets/images/acca/last_tit.png" alt="" />
          <p class="little_tit">0风险护航 让你的努力付出有所值</p>
        </div>
        <div class="get_box">
          <div class="left">
            <div class="option">
              <h5>当前学历</h5>
              <label for="low">
                <input
                  class="ipt"
                  type="radio"
                  value="专科"
                  name="edu"
                  id="low"
                />
                <span>专科</span>
              </label>
              <label for="height">
                <input type="radio" value="本科" name="edu" id="height" />
                <span>本科</span>
              </label>
              <label for="heighter">
                <input
                  type="radio"
                  value="研究生及以上"
                  name="edu"
                  id="heighter"
                />
                <span>研究生及以上</span>
              </label>
              <label for="other">
                <input type="radio" value="其他" name="edu" id="other" />
                <span>其他</span>
              </label>
            </div>
            <div class="option">
              <h5>你的年龄</h5>
              <label for="young">
                <input
                  class="ipt"
                  type="radio"
                  value="18岁以下"
                  name="age"
                  id="young"
                />
                <span>18岁以下</span>
              </label>
              <label for="adult">
                <input type="radio" value="18-24岁" name="age" id="adult" />
                <span>18-24岁</span>
              </label>
              <label for="middle">
                <input type="radio" value="24-35岁" name="age" id="middle" />
                <span>24-35岁</span>
              </label>
              <label for="old">
                <input type="radio" value="35岁以上" name="age" id="old" />
                <span>35岁以上</span>
              </label>
            </div>
            <div class="option">
              <h5>考试目的</h5>
              <label for="school">
                <input
                  class="ipt"
                  type="radio"
                  value="进入大四"
                  name="for"
                  id="school"
                />
                <span>进入大四</span>
              </label>
              <label for="work">
                <input type="radio" value="高薪就业" name="for" id="work" />
                <span>高薪就业</span>
              </label>
              <label for="welfare">
                <input type="radio" value="政策福利" name="for" id="welfare" />
                <span>政策福利</span>
              </label>
              <label for="others">
                <input type="radio" value="其他" name="for" id="others" />
                <span>其他</span>
              </label>
            </div>
          </div>
          <div class="right">
            <div class="info_item">
              <img src="@/assets/images/acca/user.png" alt="" />
              <div class="ipt_box">
                <input type="text" name="name_s" placeholder="姓名/name" />
              </div>
            </div>
            <div class="info_item">
              <img src="@/assets/images/acca/phone.png" alt="" />
              <div class="ipt_box">
                <input
                  type="text"
                  name="phone_s"
                  onkeyup="this.value=this.value.replace(/\D/g,'')"
                  placeholder="请输入电话"
                />
                <button id="code_btns">获取验证码</button>
              </div>
            </div>
            <div class="info_item">
              <img src="@/assets/images/acca/code.png" alt="" />
              <div class="ipt_box">
                <input
                  type="text"
                  name="code_s"
                  placeholder="请输入短信验证码"
                />
              </div>
            </div>
            <button id="btn_s" class="get_now">马上获取专属学习方案</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from 'crypto-js/md5'
export default {
  name: 'AccaIndex',
  data() {
    return {
      policy: true,
      input: '',
      no_about: true, // 关于我们 视频播放 默认true 未播放状态
      playing: false,
      aboutindex: 0, // 0 解读 1 政策
      otherShow: 1, // 0 标题显示  1详情显示
      isbred: false,
      aindex: -1, // ready_test a 标签 下标
      sindex: -1, //  advantage section 下标
      courseIndex: -1, //  course_list item下标
      is_code: false, // 获取验证码  true 已经获取一次
      codetext: '',
      newIndex: -1, //  news_box left navs 下标
      phone_num: '', //试学 手机号码
      user_name: '', //试学 姓名
      phone_code: '', //试学 验证码
      BannerSwiper: {
        loop: true,
        speed: 2000,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: '.banner .swiper-pagination',
          clickable: true //允许分页点击跳转
        }
      },
      BannerArry: [
        {
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          url: 'https://www.rongyuejiaoyu.com/combo/order/combo_detail/coid/1986'
        },
        {
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          url: 'https://www.rongyuejiaoyu.com/combo/order/combo_detail/coid/1986'
        }
      ],
      CourseList: [
        {
          name: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          id: 12,
          adapt: '课程描述',
          study_num: 12365
        },
        {
          name: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          id: 12,
          adapt: '课程描述',
          study_num: 12365
        },
        {
          name: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          id: 12,
          adapt: '课程描述',
          study_num: 12365
        },
        {
          name: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          id: 12,
          adapt: '课程描述',
          study_num: 12365
        },
        {
          name: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          id: 12,
          adapt: '课程描述',
          study_num: 12365
        },
        {
          name: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          id: 12,
          adapt: '课程描述',
          study_num: 12365
        },
        {
          name: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          id: 12,
          adapt: '课程描述',
          study_num: 12365
        },
        {
          name: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          id: 12,
          adapt: '课程描述',
          study_num: 12365
        }
      ],
      LiveList: [
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '2024-03-25',
          hour: '19:00-21:00',
          adapt: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '2024-03-25',
          hour: '19:00-21:00',
          adapt: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '2024-03-25',
          hour: '19:00-21:00',
          adapt: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '2024-03-25',
          hour: '19:00-21:00',
          adapt: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '2024-03-25',
          hour: '19:00-21:00',
          adapt: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '2024-03-25',
          hour: '19:00-21:00',
          adapt: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '2024-03-25',
          hour: '19:00-21:00',
          adapt: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '2024-03-25',
          hour: '19:00-21:00',
          adapt: '课程描述',
          buy_count: 12365
        }
      ],
      NewList: [
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '',
          hour: '',
          description: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '',
          hour: '',
          adapt: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '',
          hour: '',
          description: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '',
          hour: '',
          adapt: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '',
          hour: '',
          description: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '',
          hour: '',
          adapt: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '',
          hour: '',
          description: '课程描述',
          buy_count: 12365
        },
        {
          title: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          live_id: 12,
          day: '',
          hour: '',
          adapt: '课程描述',
          buy_count: 12365
        }
      ],
      TeacherList: [
        {
          name: '课程名字',
          img: 'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          image:
            'https://img.rongyuejiaoyu.com/uploads/20230329/e00b76e7a3fa379a2e2f32aa371671e1.jpg',
          TextArry: ['荣誉1', '荣誉1', '荣誉1', '荣誉1'],
          day: '',
          hour: '',
          describe: '课程描述'
        }
      ],
      CateList: ['CFA', 'FRM', 'ACCA', 'CPA', 'CPA', 'CMA'],
      Trylistion: {
        name: '',
        Telphone: '',
        Telcode: ''
      }
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      new this.$wow.WOW().init()
    })
    this.SwiperInit()
  },
  methods: {
    SwiperInit() {
      new this.$swiper('.banner .swiper-container', {
        pagination: {
          el: '.banner .swiper-pagination',
          clickable: true
        },
        autoplay: true
      })
      const LiveSwiper = new this.$swiper('.live_box .swiper-container', {
        slidesPerView: 4,
        navigation: {
          nextEl: '.live_box .swiper-button-next',
          prevEl: '.live_box .swiper-button-prev'
        },
        observer: true,
        observeParents: true,
        autoplay: true
      })
      const TeacherSwiper = new this.$swiper(
        '.teachers .tea_list .swiper-container',
        {
          slidesPerView: 6,
          spaceBetween: 20,
          observer: true,
          observeParents: true,
          navigation: {
            nextEl: '.teachers .swiper-button-next',
            prevEl: '.teachers .swiper-button-prev'
          }
        }
      )
    },
    Play_video() {
      //ACCA简介  视频播放
      this.no_about = !this.no_about
      const video = this.$el.querySelector('video')
      console.log(video, 'Play_video', this.no_about)
      this.playing = !this.playing
      if (this.playing) {
        video.play()
      } else {
        video.pause()
      }
    },
    OnPlay() {
      // 视频播放
      this.playing = true
    },
    OnPause() {
      // 视频暂停
      this.playing = false
    },
    OnOthershow(index) {
      //解读政策 详细内容显隐
      this.aboutindex = index
      // if (this.otherShow != 1) {
      //   this.otherShow = 1
      // }

      if (index == 1) {
        this.otherShow = index
      }
      // console.log(this.aboutindex, 'OnOthershow', this.otherShow)
    },
    Tohover(a) {
      //ready_test hover事件
      this.aindex = a
      this.isbred = true
      console.log(a, 'Tohover')
    },
    Livehover() {
      //ready_test 鼠标离开事件
      this.isbred = false
    },
    advantagehover(a) {
      // 优势介绍 hover事件
      this.sindex = a
      console.log(a, 'advantagehover')
    },
    advantageLivehover() {
      //优势介绍 鼠标离开事件
      this.sindex = -1
    },
    //课程列表 鼠标移入
    OnCourseenter(a) {
      this.courseIndex = a
      console.log(a, 'OnCourseenter')
    },
    //课程列表 鼠标移出
    OnCourseleave() {
      this.courseIndex = -1
      console.log(this.courseIndex, 'OnCourseleave')
    },
    newhover(a) {
      //新闻模块切换 项目事件
      this.newIndex = a
      console.log(this.newIndex, 'newhover')
    },
    newleave() {
      //新闻模块切换 项目事件
      this.newIndex = -1
      console.log(this.newIndex, 'newhover')
    },
    // layui.use('layer', function () {
    //     var layer = layui.layer
    // })
    // 获取验证码
    // var is_code = false
    GetCode() {
      let reg = /^1[3|4|5|7|8|6|9][0-9]{9}$/
      var phone_num = $('input[name="phone"]').val()
      var your_phonenum = phone_num + 'rongyue'
      var md5 = md5(your_phonenum)
      var time = 60
      console.log(phone_num, md5)
      var that = $(this)
      if (!phone_num) {
        alert('请输入手机号')
        return false
      } else if (!reg.test(phone_num)) {
        alert('请输入正确手机号')
        return false
      } else if (is_code) {
        alert('验证码已发送，请勿重复点击')
        return false
      }
      var timer = setInterval(function () {
        time--
        codetext = time + 's后获取'
        if (time == 0) {
          clearInterval(timer)
          codetext = '重新获取'
          this.is_code = false
        }
      }, 1000)
    }
    // $('#code_btn').click(function () {

    //     $.ajax({
    //         url: '/api/user/iphone_code',
    //         type: 'post',
    //         data: {
    //             mobile: phone_num,
    //             md5: md5
    //         },
    //         success: function (res) {
    //             if (res.code == 1) {
    //                 layer.msg('发送成功')
    //                 is_code = true
    //             }
    //         }
    //     })
    // })
    // $(".addcode>span").click(function(){
    //   $(".addcode").hide();
    // })
    // 中部试学ajax
    // var is_sub = false
    // $('#btn').click(function () {
    //     var name = $('input[name="name"]').val(), phone = $('input[name="phone"]').val(), code = $('input[name="code"]').val()
    //     let reg = /^1[3|4|5|7|8|6|9][0-9]{9}$/;
    //     if (!name) {
    //         layer.msg('请输入姓名')
    //         return false
    //     } else if (!phone) {
    //         layer.msg('请输入手机号')
    //         return false
    //     } else if (!code) {
    //         layer.msg('请输入验证码')
    //         return false
    //     } else if (!reg.test(phone)) {
    //         layer.msg('请输入正确手机号码')
    //         return false
    //     } else if (is_sub) {
    //         layer.msg('您的信息已经提交啦，无需重复点击')
    //         return false
    //     }
    //     $.ajax({
    //         url: '/api/index/apply_test',
    //         type: 'post',
    //         data: {
    //             mobile: phone,
    //             username: name,
    //             captcha: code,
    //             from: 'acca免费试听'
    //         },
    //         success: function (res) {
    //             if (res.code == 1) {
    //                // $('.addcode').show()
    //                 setTimeout(function(){
    //                   $('.addcode').hide()
    //                 },5000)
    //                 // layer.msg('您已提交完成，稍后老师与您取得联系，请注意查看，如有其它问题，请直接联系客服。')
    //                 is_sub = true
    //             }
    //         }
    //     })

    // })
    // 底部验证码
    // var is_codes = false
    // $('#code_btns').click(function () {
    //     let reg = /^1[3|4|5|7|8|6|9][0-9]{9}$/;
    //     var phone_num = $('input[name="phone_s"]').val()
    //     var your_phonenum = phone_num + 'rongyue'
    //     var md5 = hex_md5(your_phonenum)
    //     var time = 60
    //     var that = $(this)
    //     if (!phone_num) {
    //         layer.msg('请输入手机号')
    //         return false
    //     } else if (!reg.test(phone_num)) {
    //         layer.msg('请输入正确手机号')
    //         return false
    //     } else if (is_codes) {
    //         layer.msg('验证码已发送，请勿重复点击')
    //         return false
    //     }
    //     var timer = setInterval(function () {
    //         time--
    //         that.html(time + 's后获取')
    //         if (time == 0) {
    //             clearInterval(timer)
    //             that.html('重新获取')
    //             is_codes = false
    //         }
    //     }, 1000)
    //     $.ajax({
    //         url: '/api/user/iphone_code',
    //         type: 'post',
    //         data: {
    //             mobile: phone_num,
    //             md5: md5
    //         },
    //         success: function (res) {
    //             if (res.code == 1) {
    //                 layer.msg('发送成功')
    //                 is_codes = true
    //             }
    //         }
    //     })
    // })
    // 底部ajax
    // var is_subed = false
    // $('#btn_s').click(function () {
    //     var name = $('input[name="name_s"]').val(),
    //         phone = $('input[name="phone_s"]').val(),
    //         code = $('input[name = "code_s"]').val(),
    //         edu = $('input[name="edu"]:checked').val(),
    //         age = $('input[name="age"]:checked').val(),
    //         for_what = $('input[name="for"]:checked').val()
    //         let reg = /^1[3|4|5|7|8|6|9][0-9]{9}$/;
    //     // console.log(name, phone, code, obj)
    //     if (!name) {
    //         layer.msg("请输入姓名")
    //         return false
    //     } else if (!phone) {
    //         layer.msg("请输入手机号")
    //         return false
    //     } else if (!reg.test(phone)) {
    //         layer.msg("请输入正确的手机号码")
    //         return false
    //     } else if (is_subed) {
    //         layer.msg("您的信息已经提交啦，无需重复点击")
    //         return false
    //     }
    //     $.ajax({
    //         url: '/api/index/apply_test',
    //         type: 'post',
    //         data: {
    //             username: name,
    //             mobile: phone,
    //             captcha: code,
    //             edu:edu,
    //             age:age,
    //             aim:for_what,
    //             from: 'acca免费资料'
    //         },
    //         success: function (res) {
    //             console.log(res)
    //             if (res.code == 1) {
    //                 layer.msg('提交成功')
    //                 is_subed = true
    //             }
    //         }
    //     })
    // })

    // 新闻

    // 讲师
    // tab_cut($('.tea_list .swiper-slide'), $('.tea_info_box .tea_info'))
    // function tab_cut(e1, e2) {
    //     e1.eq(0).addClass('active')
    //     e2.eq(0).show().siblings().hide()
    //     e1.click(function () {
    //         var idx = $(this).index()
    //         $(this).addClass('active').siblings().removeClass('active')
    //         e2.eq(idx).show().siblings().hide()
    //         var top = $(window).scrollTop()
    //         $(window).scrollTop(top + (idx + 0.1) * 1)
    //     })
    // }
  }
}
</script>

<style scoped lang="scss">
// @import '@/assets/css/reset.css';
@import '@/assets/styles/global.scss';
@import '@/assets/styles/AccaIndex.scss';
</style>
